<template>
	<view class="my-invite" ref="uv-back-top">
		<headers></headers>
		<el-container>
			<el-aside class="hidden-sm-and-down" width="500px">
				<my :heads="false"></my>
			</el-aside>
			<el-main style="padding: 0px;margin: 0px;">
				<view v-if="vuex_user" class="in-content">
					<view class="in-item">
						<uv-text text="快来赚钱啦!" customStyle="margin-bottom: 10px;font-weight: bold;"></uv-text>
						<uv-text text="探索人工智能的奇妙世界，与我们一起分享知识、启发思考。" customStyle="margin-bottom: 10px;"></uv-text>
						<uv-text text="AI是一个一站式全场景AI内容生成平台，支持文本写作、图像生成、视频生成等多种类型内容生成1。专注于提供专业的AI写作、翻译、文章自成等功能"
							color="#92A5A8"></uv-text>
					</view>
					<view class="in-item">
						<uv-row justify="center">
							<view>
								<uv-qrcode :h5SaveIsDownload="true" :value="shareLinks" ref="qrcode" :options="options">
								</uv-qrcode>
							</view>
							<view v-if="false" style="margin-left: 10px;">
								<uv-qrcode :h5SaveIsDownload="true" ref="qrcode" :value="options3.data"
									:options="options3">
								</uv-qrcode>
							</view>
						</uv-row>
					</view>
					<view class="in-item">
						<view style="display: flex;justify-content: flex-end;flex-wrap: wrap;">
							<view :style="isPc?'flex: 1;':'width: 100%;'">
								<!-- width: 60%; -->
								<uv-text text="每日领算力" customStyle="font-weight: bold;"></uv-text>
								<!-- <uv-text :text="fill" style="height: 1px;" lines="1"></uv-text> -->
								<view style="display: flex;justify-content: flex-start;">
									<uv-text text="邀请好友成功获取" color="#92A5A8"></uv-text><uv-text
										:text="vuex_user.invitePoint+'积分'" size="17" align="left"></uv-text>
								</view>
								<view style="display: flex;justify-content: flex-start;">
									<uv-text text="邀请人数" color="#92A5A8"></uv-text><uv-text
										:text="vuex_user.teamCount||0" size="17" align="left"></uv-text>
								</view>
								<view style="display: flex;justify-content: flex-start;">
									<uv-text text="邀请码" color="#92A5A8"></uv-text><uv-text :text="vuex_user.inviteCode"
										size="17" align="left"></uv-text>
								</view>
							</view>
							<view
								:style="isPc?'width: 150px;':'width: 100%;display: flex;justify-content: space-between;'">
								<uv-button style="width: 150px;margin-top: 5px;" type="primary" text="保存二维码"
									@click="save" shape="circle"></uv-button>
								<uv-button style="width: 150px;margin-top: 5px;" type="primary" text="复制邀请码"
									@click="copy(vuex_user.inviteCode)" shape="circle"></uv-button>
							</view>
						</view>
					</view>
					<view class="in-item">
						<uv-text text="每日赚提成" customStyle="margin-bottom: 10px;font-weight: bold;"></uv-text>
						<uv-text text="被邀请的好友付费,邀请人就赚提成" customStyle="margin-bottom: 10px;"></uv-text>
						<uv-row v-for="(item,index) in vuex_user.commissionRates" justify="flex-start"
							customStyle="margin-bottom: 10px" :key="JSON.stringify(item)+index">
							<uv-text :text="index+1+'级分销; 提成:'" color="#92A5A8"></uv-text>
							<uv-text :text="item*100+'%'" color="#343939" size="17"></uv-text>
						</uv-row>

						<uv-row justify="flex-start">
							<uv-text text="分销提成可提现" color="#92A5A8"></uv-text>
						</uv-row>

						<!-- <view v-if="data" style="border: 1px solid #c1c1c1;border-radius: 5px;padding: 5px 10px;">
							<uv-text text="邀 请用户"></uv-text>
							<uv-avatar-group style="margin-top: 5px;" keyName="portrait" :urls="data" size="40"
								gap="0.2"></uv-avatar-group>
						</view> -->
					</view>

					<view class="in-item" v-if="!vuex_user.pid">
						<uv-text text="输入邀请码" customStyle="margin-bottom: 10px;font-weight: bold;"></uv-text>
						<uv-text text="被邀请的好友付费,邀请人就赚提成" customStyle="margin-bottom: 10px;"></uv-text>
						<uv-row justify="flex-start" customStyle="margin-bottom: 10px">
							<uv-input placeholder="请输入邀请码" border="surround" v-model="qrcode"></uv-input>
							<uv-button type="primary" text="提交邀请码" @click="submit" shape="circle"></uv-button>
						</uv-row>
					</view>
				</view>
			</el-main>
		</el-container>
		<uv-navbar v-if="!screen" :title="'邀 请'" @leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// import QRCodeStyleRound from '@/uqrcode.plugin.round.es.js';
	import my from '@/pages/my/index'
	import headers from '@/components/header/header.vue';
	import config from '@/common/config'
	import {
		addInviteCode,
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			my,
			headers,
		},
		data() {
			return {
				fill: config.fill,
				loginUrl: config.loginUrl,
				scrollTop: 0,
				qrcode: '',
				options: {
					// data: 'https://www.uvui.cn',
					size: 300,
					useDynamicSize: true,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#ffffff",
					backgroundColor: "#eeeeee",
					areaColor: '#eeeeee',
					foregroundImageBackgroundColor: "#eeeeee",
					// 指定二维码前景，一般可在中间放logo
					foregroundImageSrc: '/static/logo.svg',
				},
				options3: {
					data: 'https://mp.weixin.qq.com/s/7LFzpI4lf794NHc-uOjfvQ',
					size: 300,
					useDynamicSize: true,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#ffffff",
					backgroundColor: "#eeeeee",
					areaColor: '#eeeeee',
					foregroundImageBackgroundColor: "#eeeeee",
					// 指定二维码前景，一般可在中间放logo
					foregroundImageSrc: '/static/logo2.svg',
				},
				data: [],
				commissionRates: null
			}
		},
		computed: {
			shareLinks() {
				return this.vuex_user.hostname + '/#' + this.loginUrl + '?inviteCode=' + this.vuex_user.inviteCode;
			},
		},
		onLoad() {
			// console.log(this.isPc);
		},
		onReady() {
			/* 注册扩展插件 */
			// this.$refs.qrcode.registerStyle(QRCodeStyleRound); // qrcode为组件的ref名称
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			submit() {
				var that = this;
				// this.$refs.toast.show({
				// 	message: "保存中..."
				// });
				if (that.qrcode) {
					addInviteCode({
						inviteCode: that.qrcode,
					}, {
						custom: {
							auth: true,
						},
					}).then(e => {
						// 显示 Toast
						this.$refs.toast.show({
							title: '默认主题',
							message: "保存成功！"
						})
						this.$forceUpdate();
					}).catch(e => {
						console.log(e);
					})
				} else {
					that.$refs.toast.show({
						message: "邀请码为空"
					});
				}
			},
			save() {
				this.$refs.qrcode.save({
					success: (res) => {
						console.log(res);
						this.$refs.toast.show({
							title: '默认主题',
							message: "保存成功！"
						})
					}
				});
			},
			copy(text) {
				var that = this;
				if (typeof text !== 'string') {
					text = text[0].text
				}
				text = text.replace(/```/g, '');
				text = text.replace(/###/g, '');
				uni.setClipboardData({
					data: text,
					success: function() {
						that.$refs.toast.show({
							message: "复制成功"
						})
					},
					complete: function() {
						uni.hideToast();
					}
				});
			},
			routed(url) {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-invite {
		// background-color: #99a9bf;

		// width: calc(100% - 20px);
		.in-content {
			max-width: 800px;
			border-radius: 10px;
			border: 1px solid #eee;
			padding: 10px;
			margin-top: 5px;

			.in-item {
				margin-bottom: 10px;
				padding: 10px;
				background-color: aliceblue;
				border-radius: 10px;
			}
		}

	}
</style>